<!DOCTYPE html>
<html class="x-admin-sm">
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>店铺管理</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="../css/font.css">
    <link rel="stylesheet" href="../css/xadmin.css">
    <script src="../lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="../js/xadmin.js"></script>
    <script src="https://cdn.bootcss.com/echarts/4.6.0/echarts.min.js"></script>
</head>


<body>
<div class="x-nav">
            <span class="layui-breadcrumb">
                <a href="">店铺管理</a>
                <a><cite>门店信息</cite></a>
            </span>

</div>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <br>
                <div class="layui-card-body ">
                    <blockquote class="layui-elem-quote layui-quote-nm">欢迎来到：
                        <span class="x-red" th:text="${storeName}">天心店</span> ！
                    </blockquote>
                </div>


                <div class="layui-card-body ">



                    <fieldset class="layui-elem-field">
                        <legend>门店信息</legend>
                        <div class="layui-field-box">





                            <div class="layui-card-body ">
                                <table class="layui-table layui-form" >
                                    <tbody>
                                    <tr >
                                        <td >店铺编号</td>
                                        <td >3</td>
                                    </tr>
                                    <tr >
                                        <td >店铺名称</td>
                                        <td >开福店</td>
                                    </tr>
                                    <tr >
                                        <td >店长</td>
                                        <td >周大强</td>
                                    </tr>
                                    <tr >
                                        <td >店铺电话</td>
                                        <td >400-1234567</td>
                                    </tr>
                                    <tr >
                                        <td >店铺地址</td>
                                        <td >湖南省长沙市开福区万达广场1楼A区32号</td>
                                    </tr>

                                    </tbody>
                                </table>
                            </div>

                        </div>
                    </fieldset>

                </div>

                <div class="layui-card-body ">

                    <fieldset class="layui-elem-field">
                        <legend>销售情况</legend>

                        <div class="layui-card">
                            <br>
                            <div class="layui-card-body ">
                                <ul class="layui-row layui-col-space10 layui-this x-admin-carousel x-admin-backlog">
                                    <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
                                    <div id="main" style="width: 600px;height:400px;"></div>
                                    <div id="charts2" style="width: 550px;height:400px;display: inline-block"></div>
                                </ul>
                            </div>
                        </div>



                        <br>
                    </fieldset>

                </div>

            </div>
        </div>
    </div>
</div>
</body>

</html>



<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));

    var xAxisData = [];


    xAxisData = ["January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December"]
    //var data1 = [1,2,3,4,3,2,1,2,3,4,3,2];
    var data1 = [];
    data1[0]=[[${data0}]];
    data1[1]=[[${data1}]];
    data1[2]=[[${data2}]];
    data1[3]=[[${data3}]];
    data1[4]=[[${data4}]];
    data1[5]=[[${data5}]];
    data1[6]=[[${data6}]];
    data1[7]=[[${data7}]];
    data1[8]=[[${data8}]];
    data1[9]=[[${data9}]];
    data1[10]=[[${data10}]];
    data1[11]=[[${data11}]];

    //  for (var i =0;i<=11;i++){
    //      data1.push(${data[i]});
    //  }

    // var data2 = [2,3,4,3,2,1,2,3,4,3,2,1];
    // for (var i = 0; i < 100; i++) {
    //     <!-- xAxisData.push('类目' + i); -->
    //     data1.push((Math.sin(i / 5) * (i / 5 -10) + i / 6) * 5);
    //     data2.push((Math.cos(i / 5) * (i / 5 -10) + i / 6) * 5);
    // }
    // 指定图表的配置项和数据
    var option = {
        title: {
            text: '本店年度销售情况一览'
        },
        legend: {
            data: ['bar', 'bar2']
        },
        toolbox: {
            // y: 'bottom',
            feature: {
                magicType: {
                    type: ['stack', 'tiled']
                },
                dataView: {},
                saveAsImage: {
                    pixelRatio: 2
                }
            }
        },
        tooltip: {},
        xAxis: {
            data: xAxisData,
            splitLine: {
                show: false
            }
        },
        yAxis: {
        },
        series: [{
            name: 'bar',
            type: 'bar',
            data: data1,
            animationDelay: function (idx) {
                return idx * 10;
            }
        }
            // , {
            //     name: 'bar2',
            //     type: 'bar',
            //     data: data2,
            //     animationDelay: function (idx) {
            //         return idx * 10 + 100;
            //     }
            // }
        ],
        animationEasing: 'elasticOut',
        animationDelayUpdate: function (idx) {
            return idx * 5;
        }
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
</script>